<template>
    <div class="P-parents page">
        <div class="content">
            <PlatformCrumb back="返回">
            </PlatformCrumb>
            <div style="padding-top:50px;padding-left:20px;width:1139px;margin:0 auto;background:#fff;">
                <div style="clear:both"></div>
                <h3 style="text-align:center">{{formData.name}}</h3>
                <img class="mt20 mb20" style="display: block;margin:20px auto;max-width: 500px;"
                     :src="formData.imgs|filtersImg" alt="">
                <div class="videoform">
                    <video
                            v-if="formData.video"
                            style="width:500px;"
                            :src="formData.video|filtersImg"
                            controls>
                    </video>
                </div>
                <div v-html="formData.doc">
                </div>
                <br>
            </div>
        </div>
    </div>
</template>

<script>
    import {mapActions} from 'vuex'
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import paikebiao from '../../components/coach/paikebiao'
    import {baseImgPath, basefile, imgupload, videoupload} from '@/config/env.js';

    function getDay(day) {
        var today = new Date();
        var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
        today.setTime(targetday_milliseconds); //注意，这行是关键代码
        var tYear = today.getFullYear();
        var tMonth = today.getMonth();
        var tDate = today.getDate();
        tMonth = doHandleMonth(tMonth + 1);
        tDate = doHandleMonth(tDate);
        return tYear + "-" + tMonth + "-" + tDate;
    }

    function doHandleMonth(month) {
        var m = month;
        if (month.toString().length == 1) {
            m = "0" + month;
        }
        return m;
    }

    export default {
        components: {PlatformCrumb, paikebiao},
        data() {
            return {
                dialog: false,
                id2: this.$route.query.id ? this.$route.query.id : 0,
                formData: {
                    "address": "",
                    "coachId": 0,
                    "courseType": 0,
                    "courseTypeName": "",
                    "doc": "",
                    "grouping": 0,
                    "groupingName": "",
                    "id": 0,
                    "imgs": "",
                    "name": "",
                    "plan": "",
                },
                type: sessionStorage.getItem('userType') ? parseInt(sessionStorage.getItem('userType')) : 0,
                maxheight: '2000',
                addTable: {
                    "code": 200,
                    "message": "成功",
                    "data": []
                },
                endTime: getDay(7),
                startTime: getDay(0),
            }
        },

        computed: {
            id() {
                return this.$route.query.id
            }
        },

        methods: {
            ...mapActions('coachTraining', [
                'getKeCheng'
            ]),

            toDetail() {
                let id = this.id
                this.$router.push({name: 'wodekecheng', query: {id}})
            },

            getInfo() {
                let id = this.id
                this.getKeCheng({id}).then(res => {
                    const {code, data} = res
                    if (code === 200 && data) {
                        this.formData = data
                        // this.addTable =
                    }
                })
            }
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        },
        created() {
            this.getInfo()
        }

    }
</script>

<style scoped>
    .table .title {
        display: flex;
    }

    .df {
        display: flex;
        background: none;
    }

    .liStyle {
        border: 1px solid;
        width: 120px;
        height: 50px;
        line-height: 50px;
        text-align: center;
    }

</style>

<style>
    button {
        height: auto !important;
    }

    .mt40 {
        margin-top: 40px;
    }

    .mt20 {
        margin-top: 20px;
    }

    .mb20 {
        margin-bottom: 20px;
    }

    .P-parents {
        padding-top: 80px;
    }

    .P-parents .content {
        margin: 0 auto;
        width: 1140px;
        background-color: #fff;
        margin-bottom: 40px;
        margin-top: 12px;
    }

    .videoform {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-top: 20px;
        margin-bottom: 20px;
    }

</style>
